<template>
    <div>
        <div class="custom-tag">
            店铺 已添加:
            <div class="custom-item">
                <t-tag v-for="(tag, index) in customTags" :key="tag" :closable="true" :disabled="tag.disabled"
                    theme="primary" max-width="150" :size="tag.size" @close="onClickClose(index)"
                    style="margin-top: 10px;">{{ tag.name }}
                </t-tag>
            </div>
            <div class="custom-input">
                <t-input v-model="custom_value" label="店铺名:" :maxlength="7" placeholder="不超过7个字">
                    <template #suffix>
                        <t-button variant="outline" @click="addCustom">添加</t-button>
                    </template>
                </t-input>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive, computed } from 'vue';
import { useStore } from 'vuex'
import { Toast } from 'tdesign-mobile-vue';
const store = useStore()

const emit = defineEmits(["update"])
//标签数据
const custom_value = ref('');
let customSet = reactive(new Set(...[store.state.custom]));
const customTags = ref(computed({
    get: () => {
        return [...customSet].map(value => ({ name: value, size: 'large' }))
    },
    set: (value) => {
        
    }
}))

function addCustom() {
    if (customSet.has(custom_value.value)) {
        Toast('已经存在了！')
    } else {
        customSet.add(custom_value.value)
        let customStr = JSON.stringify([...customSet]);
        store.commit('setCustom', [...customSet])
        localStorage.setItem('custom', customStr);
        custom_value.value = ''
        emit('update')
    }

}

function onClickClose(index) {
    customSet.delete(customTags.value[index].name);
    let customStr = JSON.stringify([...customSet]);
    store.commit('setCustom', [...customSet])
    localStorage.setItem('custom', customStr)
    emit('update')
}

</script>
<style>
.custom-item {
    width: 100%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: space-around;
}

.custom-input {
    position: absolute;
    bottom: 10px;
}
</style>